<template>
	<view class="resource-container">

		<!-- 主要内容区 -->
		<view class="content">
			<!-- 图标区域 -->
			<view class="icon-area">
				<image class="icon" src="@/static/icon3.png" mode="aspectFit"></image>
				<image class="icon1" src="@/static/icon4.png" mode="aspectFit"></image>
				<!-- <text class="icon-text">资源解析</text> -->
			</view>
			<!-- 提示文本 -->
			<view class="tips">
				<text class="tips-text">- 高质量资源解析平台 -</text>
			</view>
		</view>
		<!-- 背景区域->-->
		<image class="bg-icon" src="@/static/icon1.png" mode="aspectFit"></image>
		<image class="bg-icon1" src="@/static/icon2.png" mode="aspectFit"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoUrl: ''
			}
		},
		methods: {
			handleAnalyze() {
				if (!this.videoUrl) {
					uni.showToast({
						title: '请输入视频链接',
						icon: 'none'
					});
					return;
				}
				// TODO: 实现解析逻辑
				console.log('开始解析:', this.videoUrl);
			}
		}
	}
</script>

<style lang="scss">
	.resource-container {
		min-height: 100vh;
		background: linear-gradient(180deg, #FF972E 0%, #F57B00 100%);
		position: relative;

		.bg-icon {
			position: absolute;
			left: 0;
			top: 260rpx;
			width: 120rpx;
		}

		.bg-icon1 {
			position: absolute;
			right: 0;
			top: 90rpx;
			width: 120rpx;
		}


		.content {
			padding: 40rpx;

			.icon-area {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 300rpx;

				.icon {
					width: 250rpx;
					height: 250rpx;
					margin-bottom: 20rpx;
				}

				.icon1 {
					width: 220rpx;
					height: 150rpx;
				}

				.icon-text {
					font-size: 32rpx;
					color: #ffffff;
					font-weight: bold;
				}
			}


			.tips {
				position: fixed;
				bottom: 200px;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;

				.tips-text {
					font-size: 30rpx;
					color: #ffffff;
				}
			}
		}
	}
</style>